@use "../abstracts/variables" as *;
.story {
    width: 75%;
    margin:0 auto;
    box-shadow: 0 3rem 6rem rgba($color-black, .15);
    background-color: rgba($color-white, 0.6);
    border-radius: 3px;
    padding: 6rem;
    padding-left: 9rem;
    font-size: $default-font-size;
    transform: skewX(-12deg);

    & > * { 
        transform: skewX(12deg);
    }

    &:hover &__img {
        filter: blur(3px) brightness(80%); //设置模糊 后面一个是设置明暗度
        transform: translate(-4rem) scale(1);
    }

    &:hover &__hover-text { 
        transform: translate(-50%, -50%);
    }

    &__shape {
        width: 15rem;
        height: 15rem;
        float: left;
        margin-right: 3rem;
        clip-path: circle(50% at 50% 50%); //背景裁剪
        -webkit-shape-outside: circle(50% at 50% 50%);
        shape-outside: circle(50% at 50% 50%); //这里定义文本环绕的形状,第一个参数表示半径，后面的表示圆心
        position: relative;
    }

    &__img {
        height: 100%;
        position: absolute;
        transition: all .5s;
        transform: translate(-4rem) scale(1.4);
        backface-visibility: hidden;
    }

    &__hover-text {
        transition: all .5s;
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, 250%);
        color: $color-white;
        text-transform: uppercase;
        font-size: 1.7rem;
        backface-visibility: hidden;  //防止动画是卡顿
    }
}